

import React, { useEffect, useRef } from 'react'
import * as THREE from 'three'
export default function Three() {   
    const threeWarp = useRef()

    useEffect(() => {
        const dom_left_menu_width = document.getElementsByClassName("left-menu-warp")[0].getBoundingClientRect().width
        const dom_header = document.getElementsByClassName("header")[0].getBoundingClientRect().height
        const scene = new THREE.Scene();  //场景

         //相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        camera.lookAt(0, 0, 0);

        //渲染器
        const renderer = new THREE.WebGLRenderer();//渲染器
        threeWarp.current.appendChild(renderer.domElement);
        renderer.setSize(window.innerWidth - dom_left_menu_width - 100, window.innerHeight - dom_header - 150);

        //模型
        const geometry = new THREE.BoxGeometry(2, 1, 1);
        const material = new THREE.MeshBasicMaterial({
            color: 0x0000ff, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        });

        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // AxesHelper：辅助观察的坐标系
        const axesHelper = new THREE.AxesHelper(150);
        scene.add(axesHelper);
        // 动画
        const animate = () => {
            requestAnimationFrame(animate);//逐帧调用
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate()
    }, [])

    return (
        <div ref={threeWarp} className='three-warp'></div>
    )
}
